<template>
  <div class="login">
    <div class="fromSubmit">
      <h3>早游戏管理平台</h3>
      <el-form
        :model="ruleForm"
        :rules="rules"
        status-icon
        ref="ruleForm"
        label-position="left"
        label-width="0px"
        class="demo-ruleForm login-page"
      >
        <el-form-item prop="username">
          <el-input
            @keyup.enter.native="submitForm('ruleForm')"
            type="text"
            v-model="ruleForm.username"
            auto-complete="off"
            placeholder="请输入用户名或账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            @keyup.enter.native="submitForm('ruleForm')"
            type="password"
            v-model="ruleForm.password"
            auto-complete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="loginbtn">
          <el-button type="primary" @click="submitForm(ruleForm)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { login } from "@/api/user";
import { setToken } from "@/utils/auth";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名或账号",
            trigger: "blur"
          },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    submitForm(ruleForm) {
      var self = this;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let userinfo = self.ruleForm;
          login(userinfo)
            .then(res => {
              let userList = res.data;
              setToken(userList.token);
              self.setCookie(userinfo.username, 7);
              this.$router.push({ path: "/" });
            })
            .catch(error => {
            });
        }
      });
    }
  },
  mounted() {
    this.getCookie();
  }
};
</script>
<style lang="scss" scoped>
.login {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../assets/images/login_bg.png) no-repeat center;
  background-size: 100% 100%;
  .fromSubmit {
    background: #fff;
    width: 361px;
    height: 457px;
    box-shadow: 3px 5px 8px 1px rgba(101, 101, 101, 0.1);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h3 {
      font-weight: 700;
      letter-spacing: 4px;
      font-size: 30px;
      line-height: 30px;
      color: #0e81d9;
    }
  }
  .demo-ruleForm {
    margin-top: 55px;
    text-align: center;
  }
  .el-button--primary {
    background: #0d8df0;
    border-color: #0d8df0;
  }
  .el-button {
    margin-top: 40px;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    border-radius: 23px;
    letter-spacing: 15px;
    font-size: 20px;
    padding-left: 35px;
  }
  .el-input {
    width: 290px;
    margin-bottom: 5px;
    color: #585454;
  }
  .el-form-item {
    margin-bottom: 32px;
  }
  .el-form-item__error {
    text-indent: 2em;
  }
  .loginbtn {
    margin-bottom: 0;
  }
  .el-checkbox {
    color: #585454;
  }
}
>>> .el-input__inner::placeholder {
  color: #585454;
}
</style>